<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<div id="box">
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" v-model="name"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" v-model="pwd"></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" v-model="pwd2"></td>
        </tr>
        <tr>
            <td>昵称:</td>
            <td><input type="text" v-model="nickname"></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" value="男" v-model="gender">男
                <input type="radio" name="sex" value="女" v-model="gender">女
            </td>
        </tr>
        <tr>
            <td>所属城市:</td>
            <td>
                <select v-model.number="sheng">
                    <option v-for="(item1,index1) in arr" :key="index1" :value="index1">{{item1.name}}</option>
                </select>
                <select v-model.number="shi">
                    <option v-for="(item2,index2) in shi_arr" :key="index2" :value="index2">{{item2.name}}</option>
                </select>
                <select v-model.number="qu">
                    <option v-for="(item3,index3) in qu_arr" :key="index3" :value="index3">{{item3}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td>
                <label><input type="checkbox" value="爬山" v-model="hobby">爬山</label>
                <label><input type="checkbox" value="旅游" v-model="hobby">旅游</label>
                <label><input type="checkbox" value="看书" v-model="hobby">看书</label>
            </td>
        </tr>
        <tr>
            <td><button @click="fn()">提交</button></td>
        </tr>
    </table>
    <table border="1px solid">
        <tr>
            <td>姓名</td>
            <td>成绩</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>
                <select v-model="sort">
                    <option value="">选择排序方法</option>
                    <option value="正序">正序</option>
                    <option value="倒序">倒序</option>
                </select>
            </td>
            <td><button @click="scoreSort()">按成绩排序</button></td>
            <td>
                <!-- 计算属性根据及格,不及格,全部返回数组 -->
                <!-- <select v-model="sieving">
                    <option value="">筛选</option>
                    <option>全部</option>
                    <option>及格</option>
                    <option>不及格</option>
                </select> -->
                <select v-model="sieving" @change="scoreSieving()">
                    <option value="">筛选</option>
                    <option>全部</option>
                    <option>及格</option>
                    <option>不及格</option>
                </select>
            </td>
        </tr>
        <tr>
            <td><input type="text" v-show="isInp" v-model="addName"></td>
            <td><input type="text" v-show="isInp" v-model="addScore"></td>
            <td><button @click="add()" style="width: 100px;">{{add_btn}}</button></td>
        </tr>
        <!-- 计算属性根据及格,不及格,全部返回数组 -->
        <!-- <tr v-for="(item,index) in scoreSieving" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.score}}</td>
            <td><button>删除</button></td>
        </tr> -->
        <tr v-for="(item,index) in stu_arr" :key="index">
            <td>{{item.name}}</td>
            <td>{{item.score}}</td>
            <td><button @click="del(index)" v-show="is">删除</button></td>
        </tr>
        <tr>
            <td>班级总分:{{totalScoreAll}}  |  当前总分:{{totalScore}}</td>
            <td>班级平均分{{classAverage}}  |  当前平均分:{{average}}</td>
        </tr>
    </table>

</div>
<script>
    new Vue({
        el: '#box',
        data: {
            name: '',
            pwd: '',
            pwd2: '',
            nickname: '',
            gender: '',
            hobby: [],
            sheng: 0,
            shi: 0,
            qu: 0,
            add_btn: '添加',
            sort: '',
            sieving: '',//筛选
            addName:'',
            addScore:'',
            is:true,
            isInp:false,
            arr: [{
                name: "河北省",
                city: [{
                    name: "石家庄市",
                    districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区"]
                }, {
                    name: "张家口市",
                    districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区"]
                }, {
                    name: "承德市",
                    districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇"]
                }, {
                    name: "秦皇岛市",
                    districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县"]
                }]
            }, {
                name: "山西省",
                city: [{
                    name: "太原市",
                    districtAndCounty: ["杏花岭区", "小店区", "迎泽区", "尖草坪区", "万柏林区", "晋源区", "古交市", "清徐县"]
                }, {
                    name: "朔州市",
                    districtAndCounty: ["朔城区", "平鲁区", "山阴县", "岱岳乡", "应县", "金城镇", "右玉县", "新城镇", "怀仁县", "云中镇"]
                }, {
                    name: "大同市",
                    districtAndCounty: ["城区", "矿区", "南郊区", "新荣区", "阳高县", "龙泉镇", "天镇县", "玉泉镇", "广灵县"]
                }, {
                    name: "阳泉市",
                    districtAndCounty: ["城区", "矿区", "郊区", "平定县", "冠山镇", "盂县", "秀水镇"]
                }]
            }],
            stu_arr: [{
                name: 'Tom',
                score: 80,
            }, {
                name: 'Lili',
                score: 70,
            }, {
                name: 'Bob',
                score: 50,
            }, {
                name: 'Ana',
                score: 40,
            }, {
                name: 'Alice',
                score: 90,
            },],
            sarr: [{
                name: 'Tom',
                score: 80,
            }, {
                name: 'Lili',
                score: 70,
            }, {
                name: 'Bob',
                score: 50,
            }, {
                name: 'Ana',
                score: 40,
            }, {
                name: 'Alice',
                score: 90,
            },],
        },
        methods: {
            fn() {
                console.log('姓名', this.name);
                console.log('昵称', this.nickname);
                if (this.pwd == this.pwd2) {
                    console.log('密码', this.pwd);
                }
                console.log('性别', this.gender);
                console.log('爱好', this.hobby);
                console.log('城市', this.arr[this.sheng].name, this.arr[this.sheng].city[this.shi].name, this.arr[this.sheng].city[this.shi].districtAndCounty[this.qu]);
            },
            add() {
                if (this.add_btn == '添加') {
                    this.add_btn = '确认添加'
                    this.isInp=true
                } else {
                    this.add_btn = '添加'
                    this.isInp=false
                    this.stu_arr.push({
                        name: this.addName,
                        score: this.addScore,
                    })
                }
            },
            // 排序
            scoreSort() {
                if (this.sort == '正序') {
                    this.stu_arr.sort((a, b) => { return a.score - b.score })
                } else if (this.sort == '倒序') {
                    this.stu_arr.sort((a, b) => { return b.score - a.score })
                }
            },
            // 筛选
            scoreSieving() {
                if (this.sieving == '全部'||this.sieving == '') {
                    this.is=true
                    this.stu_arr = [...this.sarr]
                } else if (this.sieving == '不及格') {
                    this.is=false
                    this.stu_arr = this.sarr.filter(i => i.score < 60)
                } else if (this.sieving == '及格') {
                    this.is=false
                    this.stu_arr = this.sarr.filter(i => i.score >= 60)
                }
            },
            // 删除
            del(ind){
                this.stu_arr.splice(ind,1)
                this.sarr.splice(ind,1)
            },

        },
        computed: {
            shi_arr() {
                return this.arr[this.sheng].city
            },
            qu_arr() {
                return this.arr[this.sheng].city[this.shi].districtAndCounty
            },
            // 班级总分
            totalScoreAll(){
                return this.sarr.reduce((a, b) => { return a + b.score }, 0)
            },
            // 当前总分
            totalScore() {
                return this.stu_arr.reduce((a, b) => { return a + b.score }, 0)
            },
            // 班级平均分
            classAverage(){
                return (this.sarr.reduce((a, b) => { return a + b.score }, 0) / this.sarr.length)
            },
            // 当前平均分
            average() {
                return (this.stu_arr.reduce((a, b) => { return a + b.score }, 0) / this.stu_arr.length)
            },
            // 计算属性根据及格,不及格,全部返回数组
            // scoreSieving() {
            //     if (this.sieving == '全部' || this.sieving == '') {
            //         return this.stu_arr
            //     } else if (this.sieving == '不及格') {
            //         return this.sarr.filter(i => i.score < 60)
            //     } else if (this.sieving == '及格') {
            //         return this.sarr.filter(i => i.score >= 60)
            //     }
            // }
        },
        mounted() {

        }
    })
</script>